<template>
  <div class="content">
    <div class="content-title">基本信息</div>
    <div v-for="(item , index) in showList" :key="index" class="detail-cell">
      <div class="detail-cell__label">
        {{ item.name }}
      </div>
      <div class="detail-cell__value">
        <WkFieldView :props="item" :form-type="item.formType" :value="item.value">
          <template v-slot:default="{ data }">
            <span v-if="data.formType === 'business_type'">{{ detail ? detail.typeName : '' }}</span>
            <span v-else-if="data.formType === 'business_status'">{{ detail ? detail.statusName : '' }}</span>
            <span v-else-if="data.formType === 'category'">{{ detail ? detail.categoryName : '' }}</span>
            <span v-else-if="data.formType === 'receivables_plan'">{{ detail ? detail.planNum : '' }}</span>
            <span v-else>{{ getCommonShowValue(data) }}</span>
          </template>
        </WkFieldView>
      </div>
    </div>
  </div>
</template>

<script setup>
import WkFieldView from '/src/components/NewCom/WkForm/WkFieldView'


import {isArray, isObject} from '/src/utils/types'
import {getFormFieldShowName} from '/src/components/NewCom/WkForm/utils'
import {computed} from "vue"

// ImportInfo
// import ImportInfo from './ImportantInfo.vue'

defineOptions({
  //  重要信息 中的列表展示
  name: 'ImportInfo',
})
const props = defineProps({
  list: Array,
  detail: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const showList = computed(() => {
  return props.list.filter(item => {
    return item.formType !== 'file' &&
        item.formType !== 'detail_table' &&
        item.formType !== 'map_address'
  })
})

/**
 * 获取非附件类型的展示值
 */
function getCommonShowValue(item) {
  if (isModule(item)) {
    return getModuleName(item)
  } else {
    return getFormFieldShowName(item.formType, item.value, '', item)
  }
}

/**
 * 客户等模块类型
 */
function isModule(item) {
  return [
    'customer',
    'business',
    'contract',
    'contacts'].includes(item.formType)
}

/**
 * 特殊格式数据获取展示名称
 */
function getModuleName(item) {
  // 模块数据
  const moduleField = {
    customer: 'customerName',
    business: 'businessName',
    contract: 'contractNum',
    contacts: 'name'
  }[item.formType]

  if (moduleField) {
    let data = {}
    if (isObject(item.value)) {
      data = item.value
    } else if (isArray(item.value) && item.value.length > 0) {
      data = item.value[0]
    }
    return data[moduleField] || ''
  }

  // 常规对象数据
  const field = {
    category: 'categoryName'
  }[item.formType]
  return item.value ? item.value[field] : ''
}
</script>

<style lang="scss" scoped>
.import-info {
  overflow: auto;
  height: 100%;
}

.content {
  padding: 20px 10px;

  &-title {
    font-size: 13px;
    font-weight: 600;
  }

  .detail-cell {
    font-size: 12px;
    margin: 20px 0;

    &__label {
      color: #666;
    }

    &__value {
      margin-top: 5px;
      color: #333;
      line-height: 16px;
    }
  }
}
</style>
